|
Java Web——Ajax的结束与第二个实例
原创
mb5fa91f7dbecc9
2023-05-09 09:58:02
博主文章分类：【JavaWeb】
©著作权
文章标签
xml
java
ci
文章分类
Python
后端开发
©著作权归作者所有：来自51CTO博客作者mb5fa91f7dbecc9的原创作品，请联系作者获取转载授权，否则将追究法律责任
文章目录：1.写在前面 2.第二个实例的步骤 2.1 IDEA中使用maven创建一个web项目 2.2 在pom.xml中加入需要使用的依赖 2.3 在数据库中创建两张表 2.4 写一个实体类Province 2.5 写这个实体类对应的dao类（传统的JDBC！！！） 2.6 写一个Servlet 2.7 在web.xml中注册这个Servlet 2.8 写一个index.jsp页面（ajax请求页面） 2.9 为项目配置Tomcat，启动测试 1.写在前面上一篇文章中，简单的介绍了一下什么是AJAX？以及AJAX中一些重要的概念和XMLHttpRequest对象这些内容。 那么，这篇文章就用第二个实例结束AJAX吧！！！ 2.第二个实例的步骤 2.1 IDEA中使用maven创建一个web项目 2.2 在pom.xml中加入需要使用的依赖 这里使用到的依赖有： servlet、jsp、mysql驱动、jackon。
javax.servlet
javax.servlet-api
3.1.0
javax.servlet.jsp
javax.servlet.jsp-api
2.3.1
mysql
mysql-connector-java
5.1.9
com.fasterxml.jackson.core
jackson-core
2.9.0
com.fasterxml.jackson.core
jackson-databind
2.9.0
2.3 在数据库中创建两张表这里，我直接在IDEA中写sql命令了，就不在Navicat中写了，创建完之后，我们回到Navicat中查看一下表的具体内容就可以了。 use springdb;
set foreign_key_checks =0;
drop table if exists `province`;
create table `province`(
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL COMMENT '省份名称',
`jiancheng` varchar(255) DEFAULT NULL COMMENT '简称',
`shenghui` varchar(255) DEFAULT NULL COMMENT '省会',
PRIMARY KEY (`id`)
)ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;
insert into `province` values (1,'河北','冀','石家庄');
insert into `province` values (2,'山西','晋','太原');
insert into `province` values (3,'内蒙古','蒙','呼和浩特');
insert into `province` values (4,'河南','豫','郑州');
insert into `province` values (5,'江苏','苏','南京');
insert into `province` values (6,'浙江','浙','杭州');
insert into `province` values (7,'安徽','皖','合肥');
insert into `province` values (8,'福建','闽','福州');
insert into `province` values (9,'江西','赣','南昌');use springdb;
set foreign_key_checks =0;
drop table if exists `city`;
create table `city` (
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` varchar(255) DEFAULT NULL,
`provinceid` int(11) DEFAULT NULL
)ENGINE =InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET =utf8;
insert into `city` values (1,'石家庄','1');
insert into `city` values (2,'保定','1');
insert into `city` values (3,'张家口','1');
insert into `city` values (4,'南昌','9');
insert into `city` values (5,'九江','9');
insert into `city` values (6,'洛阳','4');
insert into `city` values (7,'驻马店','4');
insert into `city` values (8,'开封','4');
insert into `city` values (9,'太原','2');
insert into `city` values (10,'大同','2');上面两段代码，分别在springdb这个数据库中，创建了两个表（province、city），在Navicat中可以看到结果：👇👇👇 
2.4 写一个实体类Provincepackage com.songzihao.entity;
/**
*
*/
public class Province {
private Integer id;
private String name;
private String jiancheng;
private String shenghui;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getJiancheng() {
return jiancheng;
}
public void setJiancheng(String jiancheng) {
this.jiancheng = jiancheng;
}
public String getShenghui() {
return shenghui;
}
public void setShenghui(String shenghui) {
this.shenghui = shenghui;
}
}2.5 写这个实体类对应的dao类（传统的JDBC！！！）package com.songzihao.dao;
import com.songzihao.entity.Province;
import java.sql.*;
/**
*
*/
public class ProvinceDao {
//查询省份对象
public Province queryProvinceName(Integer provinceId){
String url="jdbc:mysql://localhost:3306/springdb?useUnicode=true&characterEncoding=utf-8";
String username="root";
String password="12345678";
Connection conn=null;
PreparedStatement pst=null;
ResultSet rs=null;
Province province=null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn= DriverManager.getConnection(url,username,password);
String sql="select * from province where id=?";
pst=conn.prepareStatement(sql);
pst.setInt(1,provinceId);
rs=pst.executeQuery();
if(rs.next()) {
province=new Province();
province.setId(rs.getInt("id"));
province.setName(rs.getString("name"));
province.setJiancheng(rs.getString("jiancheng"));
province.setShenghui(rs.getString("shenghui"));
}
}catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
}finally {
try {
if(rs!=null) {
rs.close();
}
if(pst!=null) {
pst.close();
}
if(conn!=null) {
conn.close();
}
}catch (SQLException e) {
e.printStackTrace();
}
}
return province;
}
}2.6 写一个Servletpackage com.songzihao.controller;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.songzihao.dao.ProvinceDao;
import com.songzihao.entity.Province;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.io.PrintWriter;
public class QueryProvinceNameServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接收请求参数
String strProid=request.getParameter("proid");
String json="";
if(strProid!=null && !strProid.equals("")) {
ProvinceDao dao=new ProvinceDao();
Province province=dao.queryProvinceName(Integer.valueOf(strProid));
//把对象转为json，才能通过HttpServletResponse输出
if(province!=null) {
ObjectMapper om=new ObjectMapper();
json=om.writeValueAsString(province);
}
}
System.out.println("province转为json=====" + json);
//输出数据，响应ajax请求
response.setContentType("text/html;");
PrintWriter pw=response.getWriter();
pw.println(json);
pw.flush();
pw.close();
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}2.7 在web.xml中注册这个Servlet
QueryProvinceNameServlet
com.songzihao.controller.QueryProvinceNameServlet
QueryProvinceNameServlet
/query
2.8 写一个index.jsp页面（ajax请求页面）
使用ajax查询省份名称
function search() {
//1.创建异步对象
var xhr=new XMLHttpRequest();
//2.绑定事件
xhr.onreadystatechange = function () {
if (xhr.readyState==4 && xhr.status==200) {
//获取数据
var data=xhr.responseText;
//将json格式的字符串转为json对象
var obj=JSON.parse(data);
//更新数据
document.getElementById("proname").value=obj.name;
document.getElementById("projiancheng").value=obj.jiancheng;
document.getElementById("proshenghui").value=obj.shenghui;
}
}
//3..初始请求参数
var proid = document.getElementById("proid").value;
xhr.open("get","query?proid=" + proid,true);
//4.发起请求
xhr.send();
}
根据id查询省份的全部信息
省份id：
省份名称：
省份简称：
省份省会：
操作：
2.9 为项目配置Tomcat，启动测试
赞
收藏
评论
分享
举报
上一篇：Java——聊聊JUC中的volatile与内存屏障
下一篇：Java Web——JS和JSON之间的数据转换
|